<template>
  <div class="goodsdetail">
    <!-- 商品明细 -->
    <span>商品明细</span>
    <Collect :tableData="tableData" :collect="collect" :money="money" />
    <div>
      <el-button
        type="success"
        icon="el-icon-circle-plus"
        class="addGoods"
        @click="jumpAddPage"
        >新增商品</el-button
      >
      <TabList
        :tableData="tableData"
        :btnList="btnList"
        :titleList="titleList"
        :linklist="linklist"
        :isCheck="isCheck"
        @DelorderGoods="getOrderGoods"
        @TableEdit="TableEdit"
      />
    </div>

    <div class="btnbox">
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
    <Footer>
      <template v-slot:choose><div></div></template>
      <template v-slot:paging
        ><Page :total="totalSize" @getLimit="getLimit" @getPage="getPage"
      /></template>
    </Footer>
  </div>
</template>


<script>
import Collect from "../../../components/collect.vue";
import TabList from "../../../components/OrderGoodsPage.vue";
import Page from "../../../components/Paging.vue";
import Footer from "../../../components/Footer.vue";
import { mapActions } from "vuex";
import { timeFormat } from "../../../utils/utils";
import { EditOrderGoodsAxios } from "../../../http/apis/orderApi";
export default {
  name: "OrderGoods",
  components: {
    Collect,
    TabList,
    Page,
    Footer,
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 3,
      totalSize: 0,
      order_id: "",
      tableData: [],
      isCheck: false,
      info: "",
      order_goods_id: "",
      orderid: "",
      order_goods_count: "",
      order_goods_remark: "",
      discount: 0,
      btnList: [
        {
          id: 0,
          name: "删除",
          type: "订单商品",
        },
      ],
      titleList: [
        "index",
        "goods_name",
        "goods_cost",
        "goods_price",
        "order_goods_count",
        "discount",
        "order_amount",
        "goods_state",
        "order_goods_date",
      ],
      linklist: [
        {
          id: 0,
          name: "序号",
          isRouter: false,
        },
        {
          id: 1,
          name: "商品名称",
          isRouter: false,
        },
        {
          id: 2,
          name: "成本",
          isRouter: false,
        },
        {
          id: 3,
          name: "售价",
          isRouter: false,
        },
        {
          id: 4,
          name: "数量",
          isRouter: false,
        },
        {
          id: 5,
          name: "折扣",
          isRouter: false,
        },
        {
          id: 6,
          name: "总金额",
          isRouter: false,
        },
        {
          id: 7,
          name: "备注",
          isRouter: false,
        },
        {
          id: 8,
          name: "录入时间",
          isRouter: false,
        },
      ],
      // 金额
      collect: [
        { id: 2, name: "成本总和" },
        { id: 3, name: "售价总和" },
        { id: 4, name: "数量总和" },
        { id: 5, name: "折扣总和" },
        { id: 6, name: "最终总金额" },
      ],
      money: [],
    };
  },

  methods: {
    ...mapActions("orderStore", ["OrderGoodsInfoAction"]),
    // 分页
    getLimit(val) {
      this.pageSize = val;
      console.log(this.pageSize);
      this.getOrderGoods();
      // this.money = [];
    },
    // 分页
    getPage(val) {
      this.currentPage = val;
      this.getOrderGoods();
      // this.money = [];
    },
    // 显示金额数据
    compute() {
      this.money = [];
      var goods_cost = 0;
      var goods_price = 0;
      var order_goods_count = 0;
      var discount = 0;
      var order_amount = 0;
      console.log("tableData", this.tableData);
      for (var a = 0; a < this.tableData.length; a++) {
        goods_cost += this.tableData[a].goods_cost;
        goods_price += this.tableData[a].goods_price;
        order_goods_count += this.tableData[a].order_goods_count;
        discount += this.tableData[a].discount;
        order_amount += this.tableData[a].order_amount;
      }
      this.money.push(goods_cost);
      this.money.push(goods_price);
      this.money.push(order_goods_count);
      this.money.push(discount);
      this.money.push(order_amount);
      console.log("money", this.money);
    },

    // 点击新增按钮跳转页面
    jumpAddPage() {
      this.$router.push({
        path: "/order/OrderAdd?state=ordergoods",
        query: { info: this.info },
      });
    },
    // 获取商品详情
    getOrderGoods() {
      this.tableData = [];
      this.OrderGoodsInfoAction({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        orderId: this.order_id,
      })
        .then((res) => {
          console.log("获取订单商品详情数据请求成功", res.data.data);
          let arr = res.data.data[1];
          this.totalSize = res.data.data[0];
          let index = 1;
          arr.forEach((item) => {
            let obj = {
              index: index++,
              goods_name: item.goods_name,
              goods_cost: item.goods_cost,
              goods_price: item.goods_price,
              order_goods_count: item.order_goods_count,
              discount: item.discount,
              order_amount:
                item.goods_price * item.order_goods_count - item.discount,
              goods_state: item.goods_state,
              order_goods_date: timeFormat(item.order_goods_date),
              orderid: item.orderid,
              order_goods_id: item.order_goods_id,
            };
            this.tableData.push(obj);
          });
          console.log(this.tableData);
          // 计算
          this.compute();
        })
        .catch((err) => {
          console.log("获取订单商品详情数据请求成功错误", err);
        });
    },

    // 双击表格修改商品中的值
    TableEdit(row, column, cell, event) {
      this.orderid = row.orderid;
      this.order_goods_id = row.order_goods_id;
      // (this.order_goods_count = row.order_goods_count),
      // (this.discount = row.discount),
      // (this.order_goods_remark = row.order_goods_remark);
      console.log("row", row, "column", column, "cell", cell, "event", event);
      if (
        column.label != "管理" &&
        column.label != "序号" &&
        column.label != "商品名称" &&
        column.label != "成本" &&
        column.label != "售价"
      ) {
        event.target.innerHTML = "";
        //双击添加一个input框
        let cellInput = document.createElement("input");
        cellInput.value = "";
        //设置input框的类型，宽，padding，边框，圆角等都可以自己设置
        cellInput.setAttribute("type", "text");
        cellInput.style.width = "70%";
        cellInput.style.height = "90%";
        cellInput.style.padding = "5% 10%";
        cellInput.style.border = "1px solid #288EFE";
        cellInput.style.borderRadius = "3px";
        cell.appendChild(cellInput);
        //当鼠标失去焦点时，判断输入是否为空，不为空的话可以删除input
        cellInput.onblur = function () {
          if (cellInput.value == "") {
            alert("字段名不能为空");
            cellInput.style.border = "1px solid #FD1B1E";
          } else {
            cell.removeChild(cellInput);
            event.target.innerHTML = cellInput.value;
            console.log("event.target.innerHTML", event.target.innerHTML);
            this.order_goods_count = event.target.innerHTML;
            console.log("this.order_goods_count", this.order_goods_count);
            sessionStorage.setItem("count", this.order_goods_count);
          }
        };
      }
    },

    // 点击保存
    submitForm() {
      this.order_goods_count = sessionStorage.getItem("count");
      console.log("this.order_goods_count", this.order_goods_count);
      // 修改商品信息
      console.log(
        "order_goods_id",
        this.order_goods_id,
        "orderid",
        this.orderid,
        "order_goods_count",
        this.order_goods_count,
        "discount",
        this.discount,
        "order_goods_remark",
        this.order_goods_remark
      );
      EditOrderGoodsAxios({
        order_goods_id: this.order_goods_id,
        order_id: this.orderid,
        order_goods_count: this.order_goods_count,
        discount: this.discount,
        order_goods_remark: this.order_goods_remark,
      })
        .then((res) => {
          console.log("修改订单商品信息请求成功", res.data);
          this.$router.push({
            path: "/order/orderlist",
            query: { info: this.info },
          });
        })
        .catch((err) => {
          console.log("修改订单商品信息请求错误", err);
        });
    },
    // 关闭
    close() {
      this.$router.push({
        path: "/order/orderlist",
        query: { info: this.info },
      });
    },
  },

  created() {
    this.order_id = this.$route.query.info.order_id;
    console.log("当前点击查看商品详情的订单编号", this.order_id);
    // 获取订单商品详情
    this.getOrderGoods();
    this.info = this.$route.query.info;
  },
  watch: {
    order_goods_count(to, from) {
      console.log("to", to);
      console.log("from", from);
    },
  },
};
</script>

<style lang='scss' scoped>
.goodsdetail {
  width: 100%;
  position: relative;
}
.goodsdetail span {
  float: left;
  line-height: 55px;
  margin-left: 10px;
}
.money {
  width: 100%;
}
.addGoods {
  position: absolute;
  right: 10px;
  top: 5px;
}
.btnbox {
  width: 150px;
  margin: 20px auto;
}
</style>